import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss' // 导入 UnoCSS 的核心模块
import presetChinese from 'unocss-preset-chinese' // 导入 UnoCSS 的中文预设
import presetEase from 'unocss-preset-ease' // 导入 UnoCSS 的 Ease 预设
import antdUnoTheme from './themes/antd-uno-theme.json' // 导入自定义的 Ant Design UnoCSS 主题

// 使用 defineConfig 定义 UnoCSS 配置
export default defineConfig({
  // 安全列表（safelist）
  // 这里列出的类名会始终生成，即使没有在代码中使用
  safelist: [
    'py-16px', // 始终生成 padding-top 和 padding-bottom 为 16px 的类
    'pb-16px', // 始终生成 padding-bottom 为 16px 的类
  ],

  // 主题配置
  // 这里扩展了自定义的 Ant Design UnoCSS 主题
  theme: {
    ...antdUnoTheme, // 将 antdUnoTheme 的内容合并到主题中
  },

  // 预设配置
  // 这里配置了 UnoCSS 的多个预设
  presets: [
    presetUno(), // 使用 UnoCSS 的默认预设
    presetAttributify(), // 启用属性化模式（例如 `<div text="red" />`）
    presetChinese(), // 使用中文预设（支持中文类名）
    presetEase(), // 使用 Ease 预设（提供一些常用的工具类）
    presetTypography(), // 使用排版预设（提供排版相关的工具类）
    presetIcons({
      // 使用图标预设
      scale: 1.2, // 图标缩放比例
      warn: true, // 启用警告（当图标未找到时提示）
    }),
  ],

  // 快捷方式配置
  // 这里定义了一些常用的类名组合
  shortcuts: [
    ['flex-center', 'flex items-center justify-center'], // 水平垂直居中
    ['flex-between', 'flex items-center justify-between'], // 水平居中，两端对齐
    ['flex-end', 'flex items-end justify-between'], // 水平居右，两端对齐
  ],

  // 转换器配置
  // 这里配置了 UnoCSS 的转换器
  transformers: [
    transformerDirectives(), // 启用指令转换器（支持 @apply 等指令）
    transformerVariantGroup(), // 启用变体组转换器（支持类似 `hover:(bg-red text-white)` 的语法）
  ],
})
